<!-- 保障 -->
<template>
    <div class="guarantee">
        <h1 class="tit">花礼网6大保障</h1>
        <ul class="list">
            <li class="list_item" v-for='item in footerImg' :key="item.key">
                <img :src="item.img" alt="">
                <p>{{item.text}}</p>
            </li>
        </ul>
        <div class="btn">进一步了解我们</div>
    </div>
</template>
<script>
export default {
    name: "guarantee",
    props:{
        footerImg:Array
    }
}
</script>

<style scoped lang="less">
.guarantee {
    padding: .4rem .24rem;
    margin: .48rem .24rem 0;
    border-radius: .2rem;
    background: #fff;

    .tit {
        font-size: 0.38rem;
        line-height: 0.4rem;
        text-align: center;
        font-weight: bold;
    }

    ;

    .list {
        display: flex;
        flex-wrap: wrap;
        margin-top: .4rem;

        .list_item {
            width: 33.33%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding-bottom: .24rem;

            img {
                width: 1.1rem;
                height: 1.1rem;
                margin: 0 .6rem;
            }

            ;

            p {
                margin-top: 0.14rem;
                font-size: 0.24rem;
                line-height: 0.34rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    ;

    .btn {
        margin: 0.16rem 0 0;
        height: .72rem;
        line-height: .72rem;
        text-align: center;
        background: linear-gradient(90deg, #FF734C 0%, #FF3D12 100%);
        border-radius: .5rem;
        font-size: .26rem;
        font-weight: bolder;
        color: #fff;
    }

}
</style>